<template>
  <div class="homePage">
    <top-operation :showSreach="showSreach"></top-operation>
    <base-scroll>
      <div class="baseModel"> <!-- baseScroll下必须要有子节点，但是vfor中数据的请求是异步的，所以即使 插件中加载了this.nextTick也无法在数据加载后去初始化滚动条，导致div为空报错-->
        <div v-for="(item, index) in dataList" :key="item.FID" :data-FID="item.FID" :data-index="index" class="baseContent">
          <div class="contentBox" v-html="item.FContent"></div>
          <div class="contentBox clearfix">
            <el-col :span="6">联系电话：</el-col>
            <el-col :span="6">{{ item.FLinkTel }}</el-col>
            <el-col :span="12" class="textRight">
              <el-button size="mini" plain round @click="resultCollect(item.FID)">收藏</el-button>
            </el-col>
          </div>
        </div>
      </div>
    </base-scroll>
  </div>
</template>

<script>
import topOperation from '@/common/topOperation/topTitle.vue'
import baseScroll from '@/common/scroller/baseScroll.vue'

export default {
  components: {
    baseScroll,
    topOperation
  },
  data() {
    return {
      showSreach: true,
      dataList: ''
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$axios.post('/api/ChatRoom/SearchLogList', this.$route.query)
        .then((response) => {
          const res = response.data
          if (res.code == 1) {
            this.dataList = res.object
          } else {
            this.$message.error('搜索失败')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    resultCollect(val) {
      this.$axios.get('/api/Collections/InsCollection', { FChatID: val })
        .then((response) => {
          const res = response.data
          if (res.code == 1) {
            this.$message({
              message: '收藏成功',
              type: 'success'
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layui-form .layui-content {
  background: #FAFAFA;
}
.baseModel {
  padding: 0.1rem 0;
}
.baseContent {
  background: #FFF;
  margin: 0.2rem;
  border-radius: 5px;
}
.contentBox {
  padding: 0.3rem;
}
.contentBox:last-child {
  padding-top: 0;
}
.line {
  text-align: center;
}
.preclseForm {
  margin: 0.5rem;
}
.preclseForm .item-padding {
  padding-bottom: 0.3rem;
}
.fullwidth {
  width: 100%;
}
.halfwidth {
  display: inline-block;
  width: 50%;
  float: left;
}
.textRight {
  text-align: right;
}
</style>
<style>
.el-form-item {
  margin-bottom: 0.5rem;
}
</style>
